<template>
  <div class="app-container">
    <div class="filter-container">
      <el-date-picker v-model="listQuery.date" type="monthrange" align="right" unlink-panels range-separator="至"
        start-placeholder="开始月份" end-placeholder="结束月份" :picker-options="pickerOptions">
      </el-date-picker>

      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" style="margin-top:8px" @click="handleFilter">
        查询
      </el-button>

    </div>

    <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;">

      <el-table-column label="应收时间" align="center">
        <template slot-scope="{row}">
          <span>{{ row.time_unix_date }}</span>

        </template>
      </el-table-column>
      <el-table-column label="应还金额" align="center">
        <template slot-scope="{row}">
          <span >{{ row.datas.all_money }}</span>
        </template>
      </el-table-column>
      <el-table-column label="已还金额" align="center">
        <template slot-scope="{row}">
          <span>{{ row.datas.paid_money }}</span>
        </template>
      </el-table-column>
      <el-table-column label="未还金额" align="center">
        <template slot-scope="{row}">
          <span>{{ row.datas.np_paid_money }}</span>
        </template>
      </el-table-column>
      <el-table-column label="还款率" align="center">
        <template slot-scope="{row}">
          <span>{{ row.datas.rate }}%</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button size="mini" type="warning" @click="jumpDetail(row.time_unix_date)">
            详情
          </el-button>
        </template>
      </el-table-column> -->
    </el-table>
  </div>
</template>

<script>
  import {
    getOrderPaymentMonthList
  } from '@/api/finance'
  import waves from '@/directive/waves' // waves directive
  import {
    formatDate
  } from '@/utils/formatDate.js'
  import {
    parseTime
  } from '@/utils'
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  export default {
    name: 'ReceiveTable',
    components: {
      Pagination
    },
    directives: {
      waves
    },
    data() {
      return {

        tableKey: 0,
        list: null,
        total: 0,
        listLoading: true,
        listQuery: {
          date: [],
        },
        pickerOptions: {
          shortcuts: [{
            text: '本月',
            onClick(picker) {
              picker.$emit('pick', [new Date(), new Date()]);
            }
          }, {
            text: '今年至今',
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    },
    created() {
      let dt = new Date();
      dt.setDate(1)
      let start_time=dt.setMonth(dt.getMonth())
      let end_time=dt.setMonth(dt.getMonth()+3)
      let end_month=new Date(end_time).getMonth()+1;
       let end= new Date(end_time).getFullYear()+"-"+ end_month
       let start_month=new Date(start_time).getMonth()+1;
       let start= new Date(start_time).getFullYear()+"-"+ start_month
      this.listQuery.date.push(start)
      this.listQuery.date.push(end)
       console.log(this.listQuery.date);
      this.getList()
    },
    methods: {
      jumpDetail(time_unix_date){
         this.$router.push("/finance/detail/"+time_unix_date)
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      getList() {
        getOrderPaymentMonthList(this.listQuery).then(res => {
            this.list=res.data
            console.log(this.list)
        })
        this.listLoading=false

      }
    }
  }
</script>

<style>
</style>
